<template>
  <div>
    <form :class="paper.style__">
      <div class="form-group">
        <label class="col-sm-12 control-label">
          <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;
          报警器使用</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_alarm_inuse" type="success" buttons="false">
            <radio value="未使用">未使用</radio>
            <radio value="使用">使用</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-12 control-label">
          <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;
          报警器类型</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_mechanic" type="success" buttons="false">
            <radio value="电磁">电磁</radio>
            <radio value="机械">机械</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-12 control-label">
          <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;
          品牌：</label>
        <div class="col-sm-12">
          <v-select :value.sync="f_brand" :options='brands' placeholder='请选择品牌'
            close-on-select clear-button></v-select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-12 control-label">
          <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;
          型号：</label>

        <div class="col-sm-12">
          <input type="text" class="form-control" maxlength="10" v-model="piece.f_model">
        </div>
      </div>
    </form>
    <a href="#" class="btn btn-success" @click="goBackValidation">确定</a>
    <div style="height:50px;"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import * as Util from '../Util'
import RadioGroup from 'vue-strap/src/radioGroup'
import Radio from 'vue-strap/src/radioBtn'

export default {
  title: '报警器',
  data() {
    return {
      paper: this.$parent.$parent.data,
      f_brand: '',
      brands: Util.choices(this.$parent.$parent.role, '报警器品牌')
    }
  },
  props: ['idx'],
  components: {
    RadioGroup,
    Radio
  },
  ready() {
    this.$set('piece', this.paper.f_alarms[this.idx])
    this.$watch('piece.f_alarm_inuse', function(val) {
      if(val == '未使用') {
        this.$set('piece.f_brand', null)
        this.$set('piece.f_mechanic', null)
        this.$set('piece.f_model', null)
      }
    })
    // 处理品牌
    if(!this.piece.f_brand) {
        this.$set('piece.f_brand', null)
    } else {
      this.f_brand = [this.piece.f_brand]
    }
    this.$watch('f_brand', function (val) {
        this.piece.f_brand = val[0]
    })
  },
  methods: {
    goBackValidation() {
      this.$goto('paper-device', {}, 'paper-router')
    }
  }
}
</script>
